<template>
  <div class="configPage">
    <el-row>
      <el-col :sm="8">
        <div class="g-title">用车流程配置</div>
      </el-col>
    </el-row>
    <el-form ref="form" :model="conf" label-width="80px">
      <el-form-item label="选择车队" prop="groupid">
        <el-select v-model="conf.groupid" placeholder="请选择车队">
          <el-option
            :label="item.companyName"
            :value="item.id"
            v-for="(item, index) in coms"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核步数" prop="step">
        <el-select style="width:220px;" v-model="conf.step" placeholder="请审核步数">
          <el-option label="申请-调度-出车" :value="0" :key="0"></el-option>
          <el-option label="申请-审核-调度-出车" :value="1" :key="1"></el-option>
          <el-option label="申请-审核-审批-调度-出车" :value="2" :key="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核人" v-show="conf.step>=1">
        <el-checkbox-group v-model="conf.ustr1Model">
          <el-checkbox
            :label="item.userid"
            v-for="item in users"
            :key="item.userid"
          >{{item.username}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="审批人" v-show="conf.step>=2">
        <el-checkbox-group v-model="conf.ustr2Model">
          <el-checkbox
            :label="item.userid"
            v-for="item in users"
            :key="item.userid"
          >{{item.username}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-row>
        <el-col :span="6" :offset="2">
          <el-button type="primary" @click="save">提交</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import "./index.scss";
import { configJson, config } from "@/api/company";
export default {
  data: function() {
    return {
      conf: {},
      company: {},
      coms: [],
      users: []
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        let data = await configJson();
        //没有data.conf代表无此权限
        if (!data.conf) {
          this.$alert("该账户无此权限", "错误提示", {
            confirmButtonText: "确定",
            callback: action => {
              this.$router.replace({ name: "dashboard" });
            }
          });
          return;
        }
        //没配置过的单位没有id 提交时候不能传给后台避免报错
        if (!data.conf.id) {
          delete data.conf.id;
        }
        if (data.conf.ustr1) {
          data.conf.ustr1Model = data.conf.ustr1
            .split(",")
            .filter(e => e)
            .map(e => Number.parseInt(e));
        } else {
          data.conf.ustr1Model = [];
        }
        if (data.conf.ustr2) {
          data.conf.ustr2Model = data.conf.ustr2
            .split(",")
            .filter(e => e)
            .map(e => Number.parseInt(e));
        } else {
          data.conf.ustr2Model = [];
        }
        this.conf = data.conf;
        this.company = data.company;
        this.coms = data.coms;
        this.users = data.users;
      } catch (error) {
        console.log(error);
        this.$message({
          message: "出错了",
          type: "error"
        });
      }
    },
    //保存配置
    async save() {
      try {
        if (!this.conf.groupid) {
          this.$message({
            message: "请选择车队",
            type: "error"
          });
          return;
        }
        this.conf.stepuser1 = this.conf.ustr1Model.join(",");
        this.conf.stepuser2 = this.conf.ustr2Model.join(",");
        let r = await config(this.conf);
        if (r.error == 0) {
          this.$message({
            message: "保存成功",
            type: "success"
          });
          this.fetchData();
        } else {
          throw new Error();
        }
      } catch (error) {
        this.$message({
          message: "保存失败",
          type: "error"
        });
      }
    }
  }
};
</script>